<template>
  <div>
    <Card>
      <tables ref="tables" editable searchable search-place="top" v-model="tableData" :columns="columns" />
    </Card>
    <Modal width="80%" v-model="visible" :title="title" :mask-closable="false" @on-ok="okModal" @on-cancel="cancelModal">
      <tables ref="subTables" v-model="subTableData" :columns="subColumns" />
    </Modal>
  </div>
</template>

<script>
import Tables from '_c/tables'
import rcRequest from 'rc-request'
import jsCookie from 'js-cookie'
import { helpManagementValues } from '@/mock/data/option-data.js'

export default {
  name: 'role_management_page',
  components: {
    Tables
  },
  data() {
    return {
      columns: [
        { title: '序号', key: 'serialNumber' },
        { title: '类型', key: 'type' },
        { title: '标题', key: 'headline' },
        { title: '下级类型', key: 'subtype' },
        { title: '状态', key: 'status' },
        { title: '时间', key: 'time' },
        {
          title: '操作',
          key: 'action',
          width: 120,
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'info',
                  size: 'small',
                  ghost: true,
                },
                on: {
                  click: () => {
                    this.visible = true;
                    this.title = params.row.headline;
                    this.subTableData = params.row.children;
                  }
                }
              }, '预览'),
            ]);
          }
        }
      ],
      tableData: [],
      // 下级类型数据
      visible: false,
      title: '',
      subTableData: [],
      subColumns: [
        { title: '序号', key: 'serialNumber' },
        { title: '类型', key: 'type' },
        { title: '标题', key: 'headline' },
        { title: '下级类型', key: 'subtype' },
        { title: '状态', key: 'status' },
        { title: '时间', key: 'time' },
      ],
    }
  },
  methods: {
    exportExcel() { },

    addMachineGroup() { },

    okModal() { },

    cancelModal() { },

    // 获取数据
    async getListData() {
      const { data: { data } } = await rcRequest({
        method: 'post',
        url: '/help/select_help_list',
        data: {},
      })
      this.tableData = data.map(item => ({
        id: item.id,
        serialNumber: item.id,
        type: '问题',
        headline: item.title,
        subtype: '解答',
        status: helpManagementValues[item.status],
        time: item.create_time,
        children: item.children.map(subItem => ({
          id: subItem.id,
          serialNumber: subItem.id,
          type: '问题',
          headline: subItem.title,
          subtype: '解答',
          status: helpManagementValues[subItem.status],
          time: subItem.create_time,
        })),
      }))
    },
  },
  mounted() {
    this.getListData()
  }
}
</script>

<style scoped></style>
